<template>
	<view class="flex flex-col h-screen">
		<NavBarVue :title="anchor.name || ''"></NavBarVue>
		<view class="flex-1 overflow-hidden">
			<scroll-view scroll-y="true" class="h-full" @scrolltolower="onReachBottom">
				<view class="px-30">
					<anchorBoxVue :val="anchor" :edit="false" :isCollect="isCollect" class="mb-30"
						@collect="handleCollect">
					</anchorBoxVue>
					<OrientationVue></OrientationVue>
					<IncomeVue :anchor="anchor" :isAch="1"></IncomeVue>
					<view class="mt-20">
						<ImageBoxVue src="/static/user/teaching.png" width="690rpx" height="97rpx"></ImageBoxVue>
					</view>
					<BottomTabBoxVue class="mt-20" :isAch="1" :id="id" :userId="memberId" :isSelf="false"
						v-model="page">
					</BottomTabBoxVue>
				</view>
			</scroll-view>
		</view>
		<view class="px-30 bg-white flex justify-center items-center py-10">
			<view class="flex-1 flex flex-col justify-center items-center" @click="sendMsg">
				<ImageBoxVue src="/static/user/msg.png" width="48rpx" height="48rpx"></ImageBoxVue>
				<view class="text-[10px]">私信</view>
			</view>
			<view class="flex-1 flex flex-col justify-center items-center" @click="handleFollow">
				<ImageBoxVue src="/static/user/follow.png" width="48rpx" height="48rpx">
				</ImageBoxVue>
				<view class="text-[10px]" v-if="isFollow == 0">关注</view>
				<view class="text-[10px]" v-else>取消关注</view>
			</view>
			<view class="" @click="onPrivateChat(anchor)">
				<ImageBoxVue src="/static/user/connect.png" width="516rpx" height="96rpx"></ImageBoxVue>
			</view>
		</view>
	</view>
	<PlayPhoneVue ref="PlayPhoneVueRef"></PlayPhoneVue>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app"
	import userApi from '@/apis/apiList/userApi.js';
	import liveApi from '@/apis/apiList/liveApi';
	import anchorBoxVue from '../tabbar/components/user/anchorBox.vue'; //主播个人信息
	import IncomeVue from './components/Income.vue'; //收益
	import OrientationVue from './components/Orientation.vue'; // 定向问答
	import BottomTabBoxVue from '../tabbar/components/user/BottomTabBox.vue';
	import PlayPhoneVue from '@/components/PlayPhone.vue'
	import {
		jobQuery
	} from '@/config/publicFun';
	const PlayPhoneVueRef = ref()
	const id = ref('')
	const memberId = ref('')
	const anchor = ref({})
	const page = ref(1)
	const isFollow = ref(0)
	const isCollect = ref(-1)
	const user = uni.getStorageSync('user')
	onLoad((option) => {
		id.value = option.id;
	})

	onShow(() => {
		getDetail();
	})
	const onPrivateChat = async (val) => {
		const roomNum = await liveApi.queryAnchorHasliveRoom({
			'anchor.id': anchor.value.id
		})
		if (roomNum.data.has != 0) {
			uni.showToast({
				icon: 'none',
				title: '主播正在连麦中'
			})
			return
		}
		const fromAccount = anchor.value.member.id
		const info = {
			fromAccount: fromAccount,
			name: val.name,
			headimg: val.headimg
		}
		PlayPhoneVueRef.value.show(true, info)
		// uni.navigateTo({
		// 	url: `/pages/views/makePhone?type=send&fromAccount=${fromAccount}&info=${JSON.stringify({name:val.name,headimg:val.headimg})}`
		// })
		// const payload = {
		// 	data: 'phone',
		// 	description: `${user.id}`,
		// 	extension: `${user.nickname}`
		// }
		// uni.$emit('send-msg', fromAccount, payload)
		// console.log(fromAccount, payload);
		// uni.showModal({
		// 	title: '连麦提示',
		// 	showCancel: false,
		// 	content: `正在邀请"${name}"中...`,
		// 	confirmColor: "#000000",
		// 	confirmText: "取消",
		// 	success: function(res) {
		// 		if (res.confirm) {
		// 			uni.$emit('send-msg', fromAccount, {
		// 				...payload,
		// 				data: 'unPhone',
		// 			})
		// 		}
		// 	}
		// });
	}
	// 私聊
	const sendMsg = () => {
		uni.navigateTo({
			url: `/pages/msg/chatRoom?fromAccount=${anchor.value.member.id}&nickname=${anchor.value.member.nickname}&headimg=${anchor.value.member.headimg}`
		})
	}
	// 关注/取消关注
	const handleFollow = () => {
		const opt = {
			"pop.id": uni.getStorageSync('user').id,
			"bepop.id": anchor.value.member.id
		}
		liveApi.memberFansMember(opt).then(res => {
			getDetail()
		})
	}
	const handleCollect = () => {
		const opt = {
			"member.id": uni.getStorageSync('user').id,
			pst: 2,
			pid: id.value
		}
		console.log(opt)
		userApi.memberCollectSet(opt).then(res => {
			getDetail()
		})
	}

	const getFollow = () => {
		const opt = {
			"pop.id": uni.getStorageSync('user').id,
			"bepop.id": anchor.value.member.id
		}
		userApi.memberQueryFansCheck(opt).then(res => {
			isFollow.value = res.data.follow
		})
	}

	const getCollect = () => {
		const opt = {
			"member.id": uni.getStorageSync('user').id,
			pst: 2,
			pid: id.value
		}
		userApi.memberQuerycollect(opt).then(res => {
			isCollect.value = res.data.del
		})
	}

	const getList = (id) => {
		if (id !== -1) tab.value = id
	}

	const getDetail = () => {
		userApi.queryAnchorInfoByid({
			"id": id.value
		}).then((res) => {
			const arr = res.data.viomsg ? res.data.viomsg.split('|') : []
			anchor.value = {
				...res.data,
				vioArr: arr
			}
			memberId.value = res.data.member.id
			getFollow();
			getCollect()
		})
	}

	const onPath = (router) => {
		uni.navigateTo({
			url: router
		})
	}

	const onReachBottom = () => {
		page.value++
	}
</script>

<style lang="scss" scoped>
	.desc {
		color: #666666;
		font-size: 24rpx;
	}

	.box-price {
		color: #18A9FB;
		font-size: 24rpx;
		font-weight: 400;

		.num {
			font-size: 36rpx;
			font-weight: 700;
		}
	}

	.item {
		flex: 1;

		.val {
			font-size: 32rpx;
			font-weight: 700;
			color: #273A3F;
		}

		.key {
			font-size: 24rpx;
			font-weight: 400;
			color: #7290A6;
		}
	}

	.box-astrolabel {
		border-color: #fff;

		.box-title {
			.title {
				font-size: 30rpx;
				color: #333;
			}
		}
	}

	.tag {
		font-size: 24rpx;
		font-weight: 500;
		color: #9A60E3;
		background-color: #EBE4FF;
		border-color: #C8B1FB;
	}
</style>